<template>
	<div class="thenbox">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="ETH" left-text left-arrow @click-left="$router.push()" @click-right="$router.push()">
					<!-- <van-icon slot="right" size="18" name="description" /> -->
					<img slot="right" src="../../assets/images/jilueth_03.png" alt="">
				</van-nav-bar>
				<!-- 图表 -->
				<div style="background-color: #fff; margin-bottom:10px">
					<div class="cent">
						<p class="cent-big">0.00000000</p>
						<p class="cent-small">≈￥ 0.00</p>
						<div class="cent-btc">BTC</div>
						<div class="cent-cny">CNY</div>
					</div>
					<div id="main" style="width:300px;height:210px;margin: 0 auto;background-color: #fff;"></div>
				</div>

				<!-- tab栏 -->
				<div class="tabs">
					<van-tabs v-model="active" @click="getTabs">
						<van-tab title="全部"></van-tab>
						<van-tab title="转入"></van-tab>
						<van-tab title="转出"></van-tab>
						<van-tab title="失败"></van-tab>
					</van-tabs>
				</div>

				<div class="convert">
					<div class="con-img">
						<img src="../../assets/images/ziXuan_03.png" alt />
						<span>兑换</span>
					</div>
					<div class="con-gathering">
						<van-button @click="$router.push('/Collections')" type="info">收款</van-button>
					</div>
					<div class="con-transfer">
						<van-button type="info">转账</van-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts";
	export default {
		data() {
			return {
				active: 0
			};
		},
		methods: {
			getTabs(name, title) {
				console.log(name, title);
			}
		},
		mounted() {
			//图表
			var myChart = echarts.init(document.getElementById("main"));
			var option = {
				// title: {text: 'Line Chart'},
				tooltip: {},
				// toolbox: {
				//     feature: {
				//         dataView: {},
				//         saveAsImage: {
				//             pixelRatio: 2
				//         },
				//         restore: {}
				//     }
				// },
				xAxis: {},
				yAxis: {},
				series: [{
					type: "line",
					smooth: true,
					data: [
						[12, 5],
						[24, 20],
						[36, 36],
						[48, 10],
						[60, 10],
						[72, 20]
					]
				}],
				itemStyle: {
					color: "#449ad4",
					shadowBlur: 200,
					shadowColor: "rgba(0, 0, 0, 0.5)"
				}
			};
			myChart.setOption(option);
		}
	};
</script>

<style lang="less" scoped>
	.thenbox {
		background-color: #fbfcfd;
		height: 100%;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0
	}
	
	.van-nav-bar {
		background-color: #fbfcfd;
		img {
			display: inline-block;
			width: 15px;
			vertical-align: middle;
		}
		.van-nav-bar__title {
			font-size: 15px;
			color: #333333;
			font-weight: 700;
		}
		.van-icon {
			font-size: 18px;
			color: #333333 !important;
		}
	}
	
	.cent {
		height: 50px;
		padding-top: 10px;
		position: relative;
		background-color: #fff;
		.cent-big {
			text-align: center;
			font-size: 22px;
			font-weight: 700;
		}
		.cent-small {
			text-align: center;
			font-size: 12px;
			color: #ccc;
		}
		.cent-btc {
			position: absolute;
			right: 17px;
			top: 18px;
			font-size: 12px;
			color: #ccc;
		}
		.cent-btc::after {
			content: "";
			width: 6px;
			height: 6px;
			background-color: #008ced;
			position: absolute;
			left: -15px;
			top: 4px;
		}
		.cent-cny {
			position: absolute;
			right: 17px;
			top: 35px;
			font-size: 12px;
			color: #ccc;
		}
		.cent-cny::after {
			content: "";
			width: 6px;
			height: 6px;
			background-color: #8b58f5;
			position: absolute;
			left: -14px;
			top: 4px;
		}
	}
	
	.tabs {
		// height: 325px;
		.van-tabs__content {
			height: 250px;
		}
	}
	
	.convert {
		height: 60px;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #ebedf0;
		width: 100%;
		.con-img {
			width: 67px;
			img {
				display: block;
				width: 22px;
				width: 22px;
				margin: 0 auto;
			}
			span {
				display: block;
				text-align: center;
				font-size: 12px;
			}
		}
		.con-gathering {
			width: 155px;
			.van-button--info {
				width: 140px;
				background-color: #0bbed5;
				border-radius: 10px;
				border: 1px solid #0bbed5;
			}
		}
		.con-transfer {
			width: 140px;
			.van-button--info {
				width: 140px;
				border-radius: 10px;
			}
		}
	}
	
	/deep/.van-tabs__line {
		background-color: #555555;
		width: 94px !important;
		height: 2px;
	}
</style>